<template>
  <div class="index">
    <div class="index_swipe">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img src="../../assets/index2.jpeg" alt />
        </van-swipe-item>
        <van-swipe-item>
          <img src="../../assets/index1.jpeg" alt />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="index_category">
      <van-grid :column-num="3">
        <van-grid-item
          v-for="(value,index) in fiveCategoryData"
          :key="value.id"
          :icon="value.icon"
          :text="value.name"
          @click="toDetails(value.id,index)"
        />
        <van-grid-item icon="smile-o" text="其他" badge="更多" />
      </van-grid>
    </div>
    <div class="index_product">
      <van-grid :border="false" :column-num="2" :gutter="0">
        <van-grid-item v-for="value in fourProductData" :key="value.id" @click="toProductDetails">
          <van-image :src="value.photo" width="100px" height="100px" />
          <div style="margin-top:5px">{{value.name}}</div>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="app_nav">
      <van-tabbar v-model="active" active-color="#1E5EAE">
        <van-tabbar-item name="one" icon="home-o" to="/manager/index">首页</van-tabbar-item>
        <van-tabbar-item name="two" icon="orders-o" to="/manager/order">订单</van-tabbar-item>
        <van-tabbar-item name="three" icon="user-circle-o" to="/manager/user">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      active: "one"
    };
  },
  created() {
    this.loadCategory();
    this.loadProduct();
  },
  computed: {
    ...mapState("index", ["fiveCategoryData", "fourProductData"])
  },
  methods: {
    ...mapActions("index", ["toLoadCategory", "toLoadProduct"]),
    toProductDetails() {
      this.$router.push({ path: "details" });
    },
    //跳转详情页
    toDetails(id, index) {
      this.$router.push({ path: "details", query: { id: id, index: index } });
    },
    loadCategory() {
      let obj = {
        page: 0,
        pageSize: 5
      };
      this.toLoadCategory(obj);
    },
    loadProduct() {
      let obj = {
        page: 0,
        pageSize: 4
      };
      this.toLoadProduct(obj);
    }
  }
};
</script>
<style scope>
.index {
  height: calc(100vh + 200px);
}
.index_product {
  height: calc(100vh - 200px);
}
.index_swipe {
  width: 100%;
  height: 200px;
}
.index_swipe img {
  width: 100%;
  height: 200px;
}
.app_nav {
  position: relative;
  bottom: 0;
  left: 0;
}
</style>
